<template>
  <div class="prodDes-container">
    <h1>{{prodDes.title}}</h1>
    <hr />
    <div class="content" v-html="prodDes.content"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      prodDes: {}
    };
  },

  created() {
    // 此处犯了一个经典的错误。如果用上一句，会发现始终会报错，对象undefined，那是因为获取产品信息是个异步方法，
    //如果在created时就对属性赋值，异步方法还没有返回，当然会是undefined。同时这样写也没有必要，因为在该方法中
    //已经定义了对私有数据的赋值语句。
  
    // this.prodDes = this.showProdDesc();
    this.showProdDesc();
  },

  methods: {
    showProdDesc() {
      this.$http.get("api/goods/getdesc/" + this.$route.params.id).then(res => {
        // 设置vue-preview的数据数组，但是版本比较老，排版的效果有待于更新
        if (res.body.status == 0) {
          this.prodDes = res.body.message[0];
          console.log(this.prodDes);
        } else {
          Toast("Loading error...");
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.prodDes-container {
  padding: 4px;

  h1 {
    font-size: 16px;
    color: #226aff;
    text-align: center;
    margin: 15px 0;
  }
  .content {
    // 很奇怪，设置了图片宽度，但是实际效果依然是很大的样子，超过了父级的盒子宽度，但是把scoped去掉就好了，但效果很烂
    // 希望以后可以给出具体的解决办法
    img {
      width: 100%;
    }
  }
}
</style>